<!DOCTYPE HTML>
<html>
<head lang="zh">
    <meta charset="utf-8">
    <meta name="author" content="liaosimin">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>forlove</title>
    <link rel="stylesheet" type="text/css" href="http://i.gtimg.cn/vipstyle/frozenui/1.2.0/css/frozen.css?_bid=306">
    <style>
        .ui-tab-content {
            display: -webkit-box;
            width: 300%;
        }

        .ui-tab-content > li {
            -webkit-box-flex: 1;
            width: 100%;
            height: 300px;
        }

        .center-nav {
            float: left;
            width: 100%;
        }

        .center-nav div{
            float: left;
            width: 49.5%;
            padding: 2% 0;
            background: #ffffff;
            text-align: center;
            border-right: solid 1px;
            border-color: rgba(210, 180, 15, 0.08);
        }

        .box {
            margin-top: 50px;
        }
        .avatar {
            width: 4em;
            float: left;
            margin-left: 5px;
        }
        .recommend{
            height: 6em;
            margin-top: 1em;
            padding: 1em;
            background-color: white;
        }
        .recommend span{
            display: block;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <!-- list1 start -->
    <div class="ui-tab">
        <ul class="ui-tab-nav ui-border-b">
            <li class="current">消息</li>
            <li>发现</li>
            <li>我</li>
        </ul>
        <ul class="ui-tab-content">
            <li>
                <ul class="ui-list ui-list-text ui-list-link ui-border-tb">
                    <li class="ui-border-t">
                        <div class="ui-list-thumb  ui-avatar-s">
                            <span style="background-image:url(http://placehold.sinaapp.com//?100*100)"></span>
                        </div>
                        <div class="ui-list-info" onclick="location.href='{{reverse_url("Chat")}}'">
                            <h4>聊天室</h4>
                            <p></p>
                        </div>
                    </li>
                    <!--<li class="ui-border-t">-->
                        <!--<div class="ui-list-thumb  ui-avatar-s">-->
                            <!--<span style="background-image:url(http://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqHqw9gU7QzTv5zqubZAT1oIBjleDnSls2hl0qYicWFEzZnjKicqNl9MFhXv7WM0iaicJ9CyYqUsaHxzQ/0)"></span>-->
                        <!--</div>-->
                        <!--<div class="ui-list-info">-->
                            <!--<h4>风清扬</h4>-->
                            <!--<p>hello</p>-->
                        <!--</div>-->
                    <!--</li>-->
                </ul>
            </li>
            <li>
                <ul class="ui-list ui-list-link ui-border-b">
                    <li>
                        <div class="ui-list-thumb ui-avatar-s">
                            <span style="background-image:url(http://b.zol-img.com.cn/mobile_soft/ms_1/180x180/so7VveLM2r2Bo.jpg)"></span>
                        </div>
                        <div class="ui-list-info ui-border-t" onclick="location.href='{{reverse_url("Photo")}}'">
                            <h4>青春秀场</h4>
                            <p>爆照吧少年</p>
                        </div>
                    </li>
                    <li>
                        <div class="ui-list-thumb ui-avatar-s">
                            <span style="background-image:url(http://b.zol-img.com.cn/mobile_soft/ms_1/180x180/so7VveLM2r2Bo.jpg)"></span>
                        </div>
                        <div class="ui-list-info ui-border-t" onclick="location.href='{{reverse_url("Community")}}'">
                            <h4>社区</h4>
                            <p>情感分享</p>
                        </div>
                    </li>
                </ul>
            </li>

            <li>
                <div>
                    <ul class="ui-list ui-list-text ui-list-link ui-border-tb">
                        <li class="ui-border-t" onclick="location.href='{{reverse_url("SetProfile")}}'">
                            <div class="ui-list-thumb  ui-avatar-s">
                                <span style="background-image:url(http://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqHqw9gU7QzTv5zqubZAT1oIBjleDnSls2hl0qYicWFEzZnjKicqNl9MFhXv7WM0iaicJ9CyYqUsaHxzQ/0)"></span>
                            </div>
                            <div class="ui-list-info">
                                    <h4>风清扬</h4>
                                    <p>hello</p>
                            </div>
                        </li>
                    </ul>
                    <ul class="center-nav">
                        <div>关注</div>
                        <div>粉丝</div>
                    </ul>
                </div>
                <div class="box">
                    <ul class="ui-list ui-list-text ui-list-link ui-border-tb">
                        <li class="ui-border-t">
                            <p>我的相册</p>
                        </li>
                    </ul>
                </div>
                <div class="recommend">
                    <span>好友推荐:</span>
                    {% for item in r_list%}
                    <a href="/profile/{{item[0]}}"><img src="http://7xit5j.com1.z0.glb.clouddn.com/{{item[1]}}" alt="hello"
                                 class="avatar"/></a>
                    {% end %}
                </div>
            </li>
        </ul>
    </div>
</div>
<script src="http://i.gtimg.cn/vipstyle/frozenjs/lib/zepto.min.js?_bid=304"></script>
<script src="http://i.gtimg.cn/vipstyle/frozenjs/1.0.1/frozen.js?_bid=304"></script>
<script>
    (function () {

        var tab = new fz.Scroll('.ui-tab', {
            role: 'tab',
            autoplay: false,
            interval: 3000
        });

        tab.on('beforeScrollStart', function (from, to) {
            console.log(from, to);
        });

        tab.on('scrollEnd', function (curPage) {
            console.log(curPage);
        });

    })();
</script>
</body>
</html>